<template>
    <div class="content">
        <el-tabs type="border-card">
            <el-tab-pane label="人员">
                <ul class="searcch">
                    <li>
                        <SelectIpt>
                            <p>启用状态</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <SelectIpt>
                            <p>楼栋</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <SelectIpt>
                            <p>单元</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <SelectIpt>
                            <p>楼层</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <SelectIpt>
                            <p>房号</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <TextIpt>
                            <p>剩余</p>
                        </TextIpt>
                    </li>
                    <li>
                        <TextIpt>
                            <p>证件号</p>
                        </TextIpt>
                    </li>
                </ul>
                <div class="btn">
                    <BlueBtn>查询</BlueBtn>
                    <GreenBtn>新增</GreenBtn>
                    <BlueBtn>全部停用</BlueBtn>
                    <BlueBtn>全部启用</BlueBtn>
                    <BlueBtn>二维码配置</BlueBtn>
                    <BlueBtn>全部配置</BlueBtn>
                    <RedBtn>批量删除</RedBtn>
                    <BlueBtn>下载全部纸质版</BlueBtn>
                </div>
                <div class="table">
                    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column prop="date" label="日期" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="地址">
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="房屋">
                <ul class="searcch">
                    <li>
                        <SelectIpt>
                            <p>启用状态</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <SelectIpt>
                            <p>楼栋</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <SelectIpt>
                            <p>单元</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <SelectIpt>
                            <p>楼层</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <SelectIpt>
                            <p>房号</p>
                        </SelectIpt>
                    </li>
                    <li>
                        <TextIpt>
                            <p>剩余</p>
                        </TextIpt>
                    </li>
                </ul>
                <div class="btn">
                    <BlueBtn>查询</BlueBtn>
                    <GreenBtn>新增</GreenBtn>
                    <BlueBtn>全部停用</BlueBtn>
                    <BlueBtn>全部启用</BlueBtn>
                    <BlueBtn>二维码配置</BlueBtn>
                    <BlueBtn>全部配置</BlueBtn>
                    <RedBtn>批量删除</RedBtn>
                    <BlueBtn>下载全部纸质版</BlueBtn>
                </div>
                <div class="table">
                    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column prop="date" label="日期" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="地址">
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import BlueBtn from '@/components/BlueBtn.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import RedBtn from '@/components/RedBtn.vue';
export default {
    components: {
        SelectIpt,
        TextIpt,
        BlueBtn,
        GreenBtn,
        RedBtn
    },
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            multipleSelection: []
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
}
</script>

<style scoped>
.btn{
    padding: 0 20px;

}
.searcch {
    font-size: 12px;
    color: #5e5e5e;
    white-space: nowrap;
    display: flex;
    
    margin-bottom: 20px;
    padding: 0 20px;
}
.searcch li{
    margin-right: 25px;
}
</style>